<style lang="less">
	page {
		background: #F5F5F5;
	}

	.container {
		padding: 30upx 30upx 0;
		box-sizing: border-box;
		margin-bottom: 50upx;
	}
	.head{
		background: #FFFFFF;
		border-radius: 24upx;
		box-sizing: border-box;
		margin-bottom: 26upx;
		.head_title{
			padding: 36upx 32upx;
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 30upx;
			border-bottom: 1upx solid #EDEDED;
		}
		.head_down{
			padding: 36upx 20upx;
			display: flex;
			justify-content: space-around;
			.head_list{
				width: 32%;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: auto;
				.head_list_txt{
					font-size: 26upx;
					font-weight: 500;
					color: #333333;
					line-height: 26upx;
				}
				.head_list_nums{
					margin-top: 30upx;
					font-size: 50upx;
					font-family: "DINCond";
					font-weight: 400;
					color: #DBC291;
					line-height: 50upx;
				}
			}
		}
	}
	.foot{
		width: 100%;
		padding: 40upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		.foot_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30upx;
			.foot_title_txt{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
			}
			.foot_title_img{
				width: 32upx;
				height: 26upx;
			}
		}
		.charts-box {
		  width: 100%;
		  height: 600upx;
		}
	}
</style>


<template>

	<view class="container">
		<view class="head" v-for="(item,index) in topList" :key="index">
			<view class="head_title">{{item.title}}</view>
			<view class="head_down">
				<view class="head_list" v-for="(v,i) in item.moneyList" :key="i">
					<view class="head_list_txt">{{v.title}}</view>
					<view class="head_list_nums">{{v.sumMoney}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="head">
			<view class="head_title">团队业绩</view>
			<view class="head_down">
				<view class="head_list">
					<view class="head_list_txt">今日</view>
					<view class="head_list_nums">896</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">昨日</view>
					<view class="head_list_nums">1021</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">本月</view>
					<view class="head_list_nums">6320</view>
				</view>
			</view>
		</view> -->
		<view class="foot" v-if="lineBIndex == 0">
			<view class="foot_title">
				<view class="foot_title_txt">收益趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="lineBChange(1)"></image>
			</view>
			<view class="charts-box">
			  <!-- 只需绑定@getIndex即可获取点击索引 -->
			  <qiun-data-charts type="lineB" :chartData="lineBOne" :ontouch="true"/>
			</view>
		</view>
		<view class="foot" v-else-if="lineBIndex == 1">
			<view class="foot_title">
				<view class="foot_title_txt">团队业绩</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="lineBChange(0)"></image>
			</view>
			<view class="charts-box">
			  <!-- 只需绑定@getIndex即可获取点击索引 -->
			  <qiun-data-charts type="lineB" :chartData="lineBTwo" :ontouch="true"/>
			</view>
		</view>
	</view>

</template>

<script>
	import api from '@/common/api';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
	export default {

		components: {},

		data() {

			return {
				token:'',
				topList:[], //标题金额数据
				lineBOne:{}, //收益数据
				lineBTwo:{}, //业绩数据
				lineBIndex:0 //切换
			}
		},
		onLoad(){
			this.token=uni.getStorageSync('token')
			// this.token='eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6IjhmM2JhNWZkMmJlYWM0Njc3NGNlYmE3Nzk4YjRlMmM0IiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2MjIxNjg5ODE5NDAsImV4cCI6MTYyNDc2MDk4MSwidXNlcl9ncm91cF9pZCI6Mjg2NjN9.NCgte1bZrTHr7KHixPfJInXPhiUyQVrVmHpK7SrzFwnYgVlsRlfxjyn6pCWGmaGFeR2UkvJsZvQBHmnDEhTpNA'
			this.earningsteam()
		},
		methods: {
			lineBChange(index){
				this.lineBIndex = index
			},
			
			async earningsteam(){
				const [err, res] = await api.earningsteam({
					header:{
						'token': this.token
					}
				 });
				 if(res.data.code == 0){
					 this.topList = res.data.data.topList
					 let result = res.data.data
					 let days = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
					
					 let earningsListLast = result.earningsListLast.map(v => parseFloat(v)) //收益上月
					 let earningsListNow = result.earningsListNow.map(v => parseFloat(v)) //收益本月
					 let teamListLast = result.teamListLast.map(v => parseFloat(v)) //业绩上月
					 let teamListNow = result.teamListNow.map(v => parseFloat(v)) //业绩本月
					 this.lineBOne = {
						 categories:days,
						 series:[{
							 name: '本月',
							 data: earningsListNow
						 },{
							 name: '上月',
							 data: earningsListLast
						 }]
					 }
					this.lineBTwo = {
						 categories:days,
						 series:[{
							 name: '本月',
							 data: teamListNow
						 },{
							 name: '上月',
							 data: teamListLast
						 }]
					 }
				} else if (res.data.code == 500 && res.data.msg == "没有数据"){
					let arr = [{
								title: "收益",
								moneyList: [
										{title: "今日", sumMoney: "0.00"}, 
										{title: "昨日", sumMoney: "0.00"}, 
										{title: "本月", sumMoney: "0.00"},
									]
								},
							{
								title: "团队业绩", 
								moneyList: [
									{title: "今日", sumMoney: "0.00"}, 
									{title: "昨日", sumMoney: "0.00"},
									{title: "本月", sumMoney: "0.00"}
								]
							}
						]
						this.topList = arr
						let days = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
						this.lineBOne = {
							 categories:days,
							 series:[{
								 name: '本月',
								 data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
							 },{
								 name: '上月',
								 data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
							 }]
						 }
						this.lineBTwo = {
							 categories:days,
							 series:[{
								 name: '本月',
								 data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
							 },{
								 name: '上月',
								 data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
							 }]
						 }

				}
			},
		},

	}
</script>
